<template>
  <baidu-map class="map" @click="heatmapClick" v-show="show" :center="{lng: 111.75049118275203, lat: 27.26450758650167}" :zoom="13" :double-click-zoom="false">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
    <bml-heatmap :data="points" :max="100" :radius="20">
    </bml-heatmap>
    <bm-info-window :position="infoWindowPos" :show="showInfo" @close="handleClose">
      <div style="margin-top: 12px;">物流企业：{{company_name}}</div>
      <div>数量：{{clickedCount}}</div>
    </bm-info-window>
  </baidu-map>
</template>

<script>

	import {BmlHeatmap} from 'vue-baidu-map'

	export default {
		name: "heartMap",
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			points: {
				type: Array,
				default: () => [
					// {lng: 111.74210018275203, lat: 27.25230958650167},
					// {lng: 111.74220018275603, lat: 27.25230958651167},
					// {lng: 111.74230018277203, lat: 27.25230958652167}
				]
			}
		},
		data() {
			return {
				pointsData: [],
				// points: [
				// {lng: 116.418261, lat: 39.921984, count: 50},
				// {lng: 116.423332, lat: 39.916532, count: 51},
				// {lng: 116.419787, lat: 39.930658, count: 15}
				// // ...此处添加更多的数据集
				// ]
        infoWindowPos: {},
        showInfo: false,
        company_name: '',
        clickedCount: 0,
        clickInfo: {

        },
			};
		},
		computed: {},
		watch: {
			points: {
				handler(newVal) {

					console.log(newVal, '::::::newVal')
				}, deep: true
			}
		},
		components: {BmlHeatmap},
		methods: {
      handleClose(item) {
        console.log(item,':::handleClose');
        // if(!this.isFirst){
        //   this.showInfo = false;
        //   this.$nextTick(()=>{
        //     this.isFirst = false
        //   })
        // }
      },
      heatmapClick(e){
        const clickPoint = e.point;
        let ispp = false
        this.points.forEach(item => {
          const distance = this.getDistance(
              clickPoint.lng, clickPoint.lat,
              item.lng, item.lat
          );
          console.log(distance);
          if (distance < 500) { // 500米阈值
            console.log('点击热力点:', item);
            // 触发自定义事件
            ispp = true
            this.clickedCount = item.sj_count;
            this.company_name = item?.company_name;
            this.infoWindowPos = { lng: item.lng, lat: item.lat };
          }
        });
        if(ispp){
          this.showInfo = !this.showInfo;
        }else{
          this.showInfo = false
        }
      },
      getDistance(lng1, lat1, lng2, lat2) {
        const rad = (angle) => angle * Math.PI / 180.0;
        const radLat1 = rad(lat1);
        const radLat2 = rad(lat2);
        const a = radLat1 - radLat2;
        const b = rad(lng1) - rad(lng2);
        return 6378137 * 2 * Math.asin(
            Math.sqrt(Math.pow(Math.sin(a/2),2) +
                Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))
        );
      }
    },
		mounted() {

		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  .map {
    width: 100%;
    height: 100%;
  }
</style>
